<template>
        <!-- 番剧更新时间表 -->
        <div class="schedule">
            <h3 class="section-title">本周番剧更新时间表</h3>

            <!-- 星期选项标签 -->
            <div class="week-tabs">
                <div
                    class="week-tab"
                    :class="{ active: activeDay === day.id }"
                    v-for="day in weekDays"
                    :key="day.id"
                    @click="switchDay(day.id)">
                    {{ day.name }}
                </div>
            </div>

            <!-- 动态内容区域 -->
            <div class="schedule-content">
                <template v-for="day in weekDays" :key="day.id">
                    <div
                        class="day-content"
                        :class="{ active: activeDay === day.id }"
                        :id="day.id">
                        <div
                            v-if="groupedAnimeList[day.id].length != 0"
                            class="anime-main"
                            v-for="(group, index) in groupedAnimeList[day.id]"
                            :key="index">
                            <div
                                class="anime-item"
                                v-for="item in group"
                                :key="item.id"
                                @click="selectAnime(item)">
                                <router-link  :to="routerURl.anime+item.id" class="anime-name">{{ item.animeName }}</router-link>
                                <span class="anime-time">更新至{{ item.animeTime }}</span>
                                <router-link  :to="routerURl.anime+item.id" class="anime-link">详情 ></router-link >
                            </div>
                        </div>
                        <div v-else>暂无数据</div>
                    </div>
                </template>
            </div>
        </div>
</template>

<script setup>

    import {computed, ref} from "vue";
    import {routerURl} from "@/utils/Request.js";

const props = defineProps({
    weekTabs:{
        default:[
            {name:'周一',id:'monday'},
            {name:'周二',id:'tuesday'},
            {name:'周三',id:'wednesday'},
            {name:'周四',id:'thursday'},
            {name:'周五',id:'friday'},
            {name:'周六',id:'saturday'},
            {name:'周日',id:'sunday'}
        ]
    },
    videoList: {
        default:{
            monday:[
                {id:1,animeName:'间谍过家家',animeTime:'第12集'},
                {id:2,animeName:'蓝色监狱',animeTime:'第24集'},
                {id:3,animeName:'间谍过家家',animeTime:'第12集'},
                {id:4,animeName:'蓝色监狱',animeTime:'第24集'}
            ],
            tuesday:[
                {id:1,animeName:'蓝色监狱',animeTime:'第12集'},
                {id:2,animeName:'蓝色监狱',animeTime:'第24集'},
                {id:3,animeName:'蓝色监狱',animeTime:'第12集'},
                {id:4,animeName:'蓝色监狱',animeTime:'第24集'}
            ],
            wednesday:[],
            thursday:[],
            friday:[],
            saturday:[],
            sunday:[],
        }
    }

})
 // 星期数据
const weekDays = props.weekTabs

// 当前选中的星期
const activeDay = ref('monday');
const animeData = props.videoList

// 计算属性：将每天的数据按2个一组分组
const groupedAnimeList = computed(() => {
    const result = {};
    weekDays.forEach(day => {
        const dayAnime = animeData[day.id] || [];
        result[day.id] = [];
        for (let i = 0; i < dayAnime.length; i += 2) {
            result[day.id].push(dayAnime.slice(i, i + 2));
        }
    });
    return result;
});
// 切换星期
    const switchDay = (dayId) => {
        activeDay.value = dayId;
    };

    // 选择动画
    const selectAnime = (anime) => {
        console.log('选中动画:', anime);
        // 可以在这里添加跳转逻辑或状态管理
    };
</script>

<style scoped>
/* 番剧更新时间表 */
.schedule{
    margin: 30px 0;
}

/* 星期选项标签样式 */
.week-tabs {
    display: flex;
    margin: 15px 0;
    border-bottom: 1px solid #eee;
}

.week-tab {
    padding: 8px 15px;
    cursor: pointer;
    margin-right: 5px;
    border-radius: 4px 4px 0 0;
    background-color: #f5f5f5;
    transition: all 0.3s;
}

.week-tab.active {
    background-color: #3498db;
    color: white;
}

.week-tab:hover {
    background-color: #2980b9;
    color: white;
}

/* 番剧内容区域样式 */
.day-content {
    display: none;
}

.day-content.active {
    display: block;
}

.anime-main{
    display: flex;
}

.anime-item {
    display: flex;
    align-items: center;
    padding: 10px;
    margin: 0 15px;
    width: 50%;
    border-bottom: 1px solid #eee;
}

.anime-name {
    flex: 1;
    color: #333;
    text-decoration: none;
    font-weight: bold;
}

.anime-name:hover {
    color: #3498db;
}

.anime-time {
    width: 120px;
    text-align: center;
    color: #888;
    font-size: 14px;
}

.anime-link {
    width: 60px;
    text-align: right;
    color: #3498db;
    text-decoration: none;
    font-size: 14px;
}

.anime-link:hover {
    text-decoration: underline;
}
</style>